﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <el-container class="list_pagecontainer">
            <el-header>
                <el-row>
                    <el-col :span="24">
                        <div class="list_searchcontainer">
                            错误类型：
                            <el-select v-model="errorType" placeholder="请选择">
                                <el-option label="全部" value="">
                                </el-option>
                                <el-option label="SQL注入错误" :value="200">
                                </el-option>
                                <el-option label="代码错误" :value="300">
                                </el-option>
                                <el-option label="页面错误" :value="400">
                                </el-option>
                                <el-option label="其他错误" :value="500">
                                </el-option>
                            </el-select>
                            起始时间：
                            <el-date-picker v-model="startDate" type="date" placeholder="选择日期">
                            </el-date-picker>
                            结束时间:
                            <el-date-picker v-model="endDate" type="date" placeholder="选择日期">
                            </el-date-picker>

                            <el-button type="primary" v-on:click="bindGrid" icon="el-icon-search">搜索</el-button>
                        </div>

                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <common-table :data="tableData" :page-Index="pageIndex" :page-Size="pageSize" :total="total"
                    :table-Height="tableHeight" :show-Delete="false" :show-Edit="false" v-on:on-load="bindGrid"
                    v-on:on-pageindexchange="pageIndexChange" ref="table">
                    <template slot="column">
                        <el-table-column prop="ErrorType" header-align="left" align="left" label="错误类型" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ErrorType==200">SQL注入错误</span>
                                <span v-if="scope.row.ErrorType==300">代码错误</span>
                                <span v-if="scope.row.ErrorType==400">页面错误</span>
                                <span v-if="scope.row.ErrorType==500">其他错误</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ErrorUrl" label="错误Url">
                        </el-table-column>
                        <el-table-column prop="ErrorDate" label="错误时间" width="200">
                        </el-table-column>
                        <el-table-column prop="FromIP" label="登陆IP" width="150">
                        </el-table-column>
                        <template slot="opbefore">
                            <el-table-column prop="ColumnDetail" header-align="center" align="center" label="表结构"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" v-on:click="openErrorDetail(scope.row)">错误详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </template>
                    </template>
                </common-table>
            </el-main>
        </el-container>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")

</html>

<script>
    var tableUrl = GetRootPath() + "Frame/ErrorLog/FindList"
    var pageData = {
        //data
        tableData: [],
        //page
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        //search
        errorType: "",
        startDate: '',
        endDate: '',
        //css
        tableHeight: 0,
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            pageData.tableHeight = CaculateTableHeight() + 50;
        },
        methods: {
            pageIndexChange: function (val) {
                this.pageIndex = val
            },
            bindGrid: function () {
                bindGrid();
            },
            openErrorDetail: function (row) {
                OpenTopDialog('errordetail', '查看错误详情', 'Frame/ErrorLog/Detail?RowGuid=' + row.RowGuid, 600,
                    1000,
                    bindGrid)
            }
        }
    })

    function bindGrid() {
        var data = {
            PageIndex: pageData.pageIndex,
            PageSize: pageData.pageSize,
            ErrorType: pageData.errorType,
            StartDate: pageData.startDate,
            endDate: pageData.endDate
        }
        JsonAjaxPost(tableUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "tableData", data.data);
            Vue.set(pageData, "total", data.total)
        })
    }
</script>